﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jq获取手机验证码效果-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
}
input:focus {
	outline:none;
}
.tabs {
	width:600px;
	margin:0 auto;
	margin-top:100px;
}
.tabs-title {
	height:50px;
	line-height:50px;
	background:#000;
	color:#fff;
	padding:0 20px
}
.item {
	margin-top:50px;
	position:relative
}
.tel,.code {
	width:600px;
	border:none;
	border-bottom:1px solid #999;
	height:30px;
	margin-top:10px
}
.j-getCode {
	position:absolute;
	right:0;
	top:20px;
	padding:4px 20px;
	background:#FFE8BB;
	color:#FF6600;
	border-radius:45px;
}
.send {
	background:#E5E5E5;
	color:#777;
}
.j-getCode:hover {
	cursor:pointer;
}
#j-count {
	font-style:normal;
	padding-right:2px
}
</style>
</head>
<body>
<div class="tabs">
   <!--  <p class="tabs-title">绑定用户信息</p>
    <div class="item">
        <p>输入手机号</p>
        <input type="text" class="tel" id="phone" placeholder="请输入您的手机号">
    </div>
    <div class="item">
        <p>验证码</p>
        <input type="text" class="code" id="code" placeholder="请输入验证码">
        <span class="j-getCode" id="getCode" onclick="getCode(&quot;this&quot;)">获取验证码</span>
        <span class="j-getCode send" id="resetCode" disabled="disabled" style="display:none"><em id="j-count"></em>秒后再获取</span>
    </div> -->
    <form method="post" action="{:url('checkreg')}" >
         <p class="tabs-title">注册账号</p>
        <div class="item">
            <p>输入手机号</p>
            <input type="text" class="tel" id="phone" name="user_mobile" placeholder="请输入您的手机号">
        </div>
        <div class="item">
            <p>用户名</p>
            <input type="text" class="code" id="code" name="user_name" placeholder="请输入验证码">
        </div>
         <div class="item">
            <p>密码</p>
            <input type="password" class="code" id="code" name="user_password" placeholder="请输入密码">
        </div>
        <div class="item">

            <input type="submit" value="注册">
        </div>
    </form>
</div>

<script>
//是否输入正确的手机号标识，如果为1则为正确的手机号，为0，则为不正确的手机号
var isPhone = 1;

function getCode(e) {

    checkphone(); //获取手机验证码

    if (isPhone) {
        resetCode();
    }


}
//检查手机号是否正确
function checkphone() {
    //获取手机验证码
    var phone = $("#phone").val();
    //手机验证码正则表达式
    var reg = /^1[3|4|5|7|8][0-9]{9}$/;


    isPhone = 1;
    if (phone == "") {
        alert("请输入手机号");
        isPhone = 0;
        return;
    }
    //如果验证不通过，则执行请输入正确的手机号
    if (!reg.test(phone)) {
        alert("请输入正确的手机号");
        isPhone = 0;
        return;
    }
}
//输入正确手机号，获取验证码按钮发生变化
//倒计时
function resetCode() {
    //设定倒数时间总数60秒
    var jMinutes = 5;
    $("#getCode").hide();
    $("#resetCode").show();
    $("#resetCode em").html('5');

    Timer = setInterval(function() {
        jMinutes -= 1;
        if (jMinutes == 0) {
            clearInterval(Timer)
            $("#resetCode").hide();
            $("#getCode").show();
        } else {
            $("#resetCode em").html(jMinutes);
        }
    }, 1000)



}
</script>

</body>
</html>
